<template>
  <div class="father">
    <h1>提供和注入</h1>
    <h1>father{{name}}{{pice}}</h1><br>
    {{a}}
    <Son :a='a'  @add='add'/>
  </div>
</template>

<script>
// import FirstDemo from '@/components/FirstDemo.vue'
import Son from '../components/Son.vue'
import {reactive,toRefs,provide, ref} from 'vue'
export default {
  components:{
    Son
  },
  setup () {
    let car =reactive({
      name:'艾迪',
      pice:151515151
    })
    let a=ref(0)
    function add (data){
      a.value=data
      // console.log(data)
    }
    provide('car',car) // 给自己后代传递数据
    return {
      ...toRefs(car),
      a,
      add
    }
  }
}
</script>

<style lang="less" scoped>
.father{
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  background: pink;
}
</style>